(function() {

this.pasta = this.pasta || {};
this.pasta.webgui = this.pasta.webgui || {};

this.pasta.webgui.SliderPanel = pasta.webgui.ContainerControl.extend(
{
	init : function()
	{
		this._super();
		
		this.setWidth(45);
		this.setHeight(37);
		
		this.canvas.style.background = "url(img/control/slider/tooltip.png) no-repeat";
		
		this.lblTitle = new pasta.webgui.Label();
		this.lblTitle.setLeft(0);
		this.lblTitle.setTop(5);
		this.lblTitle.setWidth(45);
		this.lblTitle.setAlign("center");
		this.lblTitle.font.setBold(true);
		this.lblTitle.font.setColor("#FFFFFF");
		this.lblTitle.font.setSize(14);
		this.lblTitle.setCaption("50");
		this.addControl(this.lblTitle);
		
		this.setVisible(false);
	},
	
	show : function()
	{
		this.bringToFront();
		this.setVisible(true);
	},
	
	setCaption : function(data)
	{
		this.lblTitle.setCaption(data);
	},
});

this.pasta.webgui.Slider = pasta.webgui.Control.extend(
{
	init : function() 
	{
		this._super();
		
		this.caption = "";
		this.min = 0;
		this.max = 10;
		this.value = 0;
		
		this.leftBg = document.createElement("div");
		this.leftBg.id = this.cid + "_leftBg";
		this.leftBg.style.position = "absolute";
		this.leftBg.style.left = "10px";
		this.leftBg.style.top = "0px";
		this.leftBg.style.width = "6px";
		this.leftBg.style.height = "32px";
		this.leftBg.style.backgroundImage = "url(img/control/slider/frameLeft.png)";
		this.leftBg.style.border = "apx solid red";
		this.canvas.appendChild(this.leftBg);
		
		this.rightBg = document.createElement("div");
		this.rightBg.id = this.cid + "_rightBg";
		this.rightBg.style.position = "absolute";
		this.rightBg.style.left = (this.width - 16) + "px";
		this.rightBg.style.top = "0px";
		this.rightBg.style.width = "6px";
		this.rightBg.style.height = "32px";
		this.rightBg.style.backgroundImage = "url(img/control/slider/frameRight.png)";
		this.canvas.appendChild(this.rightBg);
		
		this.middleBg = document.createElement("div");
		this.middleBg.id = this.cid + "_middleBg";
		this.middleBg.style.position = "absolute";
		this.middleBg.style.left = "16px";
		this.middleBg.style.top = "0px";
		this.middleBg.style.width = (this.width - 12) + "px";
		this.middleBg.style.height = "32px";
		this.middleBg.style.backgroundImage = "url(img/control/slider/frameCenter.png)";
		this.canvas.appendChild(this.middleBg);
		
		this.leftProgress = document.createElement("div");
		this.leftProgress.id = this.cid + "_leftProgress";
		this.leftProgress.style.position = "absolute";
		this.leftProgress.style.left = "10px";
		this.leftProgress.style.top = "0px";
		this.leftProgress.style.width = "6px";
		this.leftProgress.style.height = "32px";
		this.leftProgress.style.backgroundImage = "url(img/control/slider/progressLeft.png)";
		this.leftProgress.style.border = "apx solid red";
		this.canvas.appendChild(this.leftProgress);
		
		this.rightProgress = document.createElement("div");
		this.rightProgress.id = this.cid + "_rightProgress";
		this.rightProgress.style.position = "absolute";
		this.rightProgress.style.left = (this.width - 16) + "px";
		this.rightProgress.style.top = "0px";
		this.rightProgress.style.width = "6px";
		this.rightProgress.style.height = "32px";
		this.rightProgress.style.backgroundImage = "url(img/control/slider/progressRight.png)";
		this.canvas.appendChild(this.rightProgress);
		
		this.middleProgress = document.createElement("div");
		this.middleProgress.id = this.cid + "_middleProgress";
		this.middleProgress.style.position = "absolute";
		this.middleProgress.style.left = "16px";
		this.middleProgress.style.top = "0px";
		this.middleProgress.style.width = "0px";
		this.middleProgress.style.height = "32px";
		this.middleProgress.style.backgroundImage = "url(img/control/slider/progressCenter.png)";
		this.canvas.appendChild(this.middleProgress);
		
		this.button = document.createElement("div");
		this.button.id = this.cid + "_button";
		this.button.style.position = "absolute";
		this.button.style.left = "0px";
		this.button.style.top = "0px";
		this.button.style.width = "32px";
		this.button.style.height = "32px";
		this.button.style.cursor = "pointer";
		this.button.style.fontSize = "small";
		this.button.style.backgroundImage = "url(img/control/slider/button.png)";
		this.canvas.appendChild(this.button);
		
		if (pasta.webgui.Slider.panel == null)
		{
			pasta.webgui.Slider.panel = new pasta.webgui.SliderPanel();
			stage.addControl(pasta.webgui.Slider.panel);
		}
		
		this.buttonLeft = 0;
		
		this._onChange = null;
		
		var obj = this;
		
		this.button.onmousedown = function(e) { if (!e) e = window.event; obj.doMouseDown(e.offsetX, e.offsetY); };
		this.button.onmouseup = function(e) { if (!e) e = window.event; obj.doMouseUp(e.offsetX, e.offsetY); };
		this.button.ontouchstart = function(e) { if (!e) e = window.event; obj.doMouseDown(e.offsetX, e.offsetY); };
		this.button.ontouchend = function(e) { if (!e) e = window.event; obj.doMouseUp(e.offsetX, e.offsetY); };
	},
	
	//------------------ Event Handler -----------------
	
	doMouseDown : function(x, y)
	{
		this.downX = stage.getMouseX();
		this.downY = stage.getMouseY();
		
		pasta.webgui.Slider.panel.show();
		
		stage.canvas.style.webkitUserSelect = "none";
    	stage.canvas.style.mozUserSelect = "none";
    	stage.canvas.style.userSelect = "none";
		
		stage.addMouseListener(this);
		this._super(x, y);
	},
	
	doScreenMouseMove : function(x, y)
	{
		var move = x - this.downX;
		
		var newLeft = this.buttonLeft + move;
		var maxLeft = (this.getWidth() - 32);
		
		if (newLeft < 0)
		{
			newLeft = 0;
			this.value = this.min;
		}
		else if (newLeft > maxLeft)
		{
			newLeft = maxLeft;
			this.value = this.max;
		}
		else
			this.value = this.min + parseInt((newLeft / maxLeft) * (this.max - this.min));
		
		this.buttonLeft = newLeft;
		this.button.style.left = newLeft + "px";
		this.button.title = "" + this.value;
		
		var rect = this.button.getBoundingClientRect();
		pasta.webgui.Slider.panel.setLeft(rect.left - 7);
		pasta.webgui.Slider.panel.setTop(rect.top - 32);
		pasta.webgui.Slider.panel.setCaption("" + this.value);
		
		this.rightProgress.style.left = (newLeft + 10) + "px";
		this.middleProgress.style.width = (newLeft - 6) + "px";
		
		this.downX = x;
		this.downY = y;
		
		if (this._onChange != null)
			this._onChange.callHandler(this, this.value);
	},
	
	doScreenMouseUp : function(x, y)
	{
		stage.delMouseListener(this);
		pasta.webgui.Slider.panel.setVisible(false);
		
		stage.canvas.style.webkitUserSelect = "text";
    	stage.canvas.style.mozUserSelect = "text";
    	stage.canvas.style.userSelect = "text";
	},
	
	//------------------ Setter & Getter -----------------
	
	getValue : function()
	{
		return this.value;
	},
	
	setValue : function(data)
	{
		this.value = data;
		
		var left = parseInt(((this.value - this.min) / (this.max - this.min)) * (this.getWidth() - 32));
		
		this.buttonLeft = left;
		this.button.style.left = left + "px";
		this.button.title = "" + this.value;
		
		this.rightProgress.style.left = (left + 10) + "px";
		
		var newWidth = (left - 6);
		
		if (newWidth < 0)
			this.middleProgress.style.width = "0px";
		else
			this.middleProgress.style.width = (left - 6) + "px";
	},
	
	getMin : function()
	{
		return this.min;
	},
	
	setMin : function(data)
	{
		this.min = data;
		
		this.setValue(this.value);
	},
	
	getMax : function()
	{
		return this.max;
	},
	
	setMax : function(data)
	{
		this.max = data;
		
		this.setValue(this.value);
	},
	
	setWidth : function(data)
	{
		this._super(data);
		
		this.rightBg.style.left = (this.width - 16) + "px";
		this.middleBg.style.width = (this.width - 32) + "px";
	},
	
	//--------------------------- Event -------------------------
	
	getOnChange : function()
	{
		if (this._onChange == null)
			this._onChange = new pasta.util.EventObj();
		
		return this._onChange;
	}
});

})();